import React, { useEffect,useState,useRef } from 'react';
import { PlusOutlined,CopyOutlined,CalendarOutlined,UnorderedListOutlined,DeleteOutlined } from '@ant-design/icons';
import { connect } from 'dva';
import { history } from 'umi';
import { Card,Button,Form,message,Modal,Select,TimePicker,Radio,Row,Col,Divider,DatePicker} from 'antd';
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import cnLocale from '@fullcalendar/core/locales/zh-cn';
import styles from './style.less';
import { PageHeaderWrapper,RouteContext } from '@ant-design/pro-layout';
import CopySchedule from './copySchedule'
import { saveSchedule } from './service';
import db from '@/utils/localstorage';
import moment from 'moment';
import LessonList from '@/pages/lesson/list'
import ScheduleGroup from '@/components/ScheduleGroup'
import ProTable from '@ant-design/pro-table';
import { queryPrivateSchedule,batchRemoveSchedule,removeSchedule} from './service';
import {HasPermission} from '@/components/AuthComponent/HasPermission';
import ResevationSave from './ResevationSave';
const AuthButton = HasPermission(Button);
const AuthDivider = HasPermission(Divider);

const format = 'HH:mm';
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 7,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 12,
    },
    md: {
      span: 10,
    },
  },
};

/**
 * 私教周排期表 
 * 1.日期问题：每次翻页都是一周时间 
 * @param {*} props 
 */
function getCurrWeekDays () {
  let date = []
  date.push(moment().weekday(0).format('YYYY-MM-DD'))
  date.push(moment().weekday(1).format('YYYY-MM-DD'))
  date.push(moment().weekday(2).format('YYYY-MM-DD'))
  date.push(moment().weekday(3).format('YYYY-MM-DD'))
  date.push(moment().weekday(4).format('YYYY-MM-DD'))
  date.push(moment().weekday(5).format('YYYY-MM-DD'))
  date.push(moment().weekday(6).format('YYYY-MM-DD'))
  return date
}

const Schedule = props => {
    const { dispatch,coachList,courseList,siteList,shopList } = props;
    const [modalVisible,setModalVisible] = useState(false);
    const [classId,setClassId] = useState(null);
    const [form] = Form.useForm();
    const actionRef = useRef();
    const resevationSaveRef = useRef();
    const [data, setData] = useState([]);
    const [editingKey, setEditingKey] = useState('');
    const isEditing = record => record.key === editingKey;

    let calendarComponentRef = React.createRef();
    const [calendarWeekends, setCalendarWeekends] = React.useState(true);
    const [visible, setVisible] = React.useState(false);
    const [addVisible, setAddVisible] = React.useState(false);
    const [dateStr, setDateStr] = React.useState("");
    const [calendarEvents, setCalendarEvents] = React.useState([]);
    const [tabActiveKey, setTabActiveKey] = React.useState("schedule");
    const [type, setType] = React.useState("W");
    const [formValues, setFormValues] = React.useState({});
    const [classTableInfoMap, setClassTableInfoMap] = useState({});
    const [weekList, setWeekList] = useState(getCurrWeekDays());
    const [showType, setShowType] = React.useState("C");
    const [copyVisible, setCopyVisible] = React.useState(false);
    const columns = [
      {
        title: '时间',
        dataIndex: 'date',
        hideInTable:true,
        renderFormItem:()=><RangePicker style={{ width: '100%' }} />
      },
      {
        title: '课程',
        dataIndex: 'courseName',
        renderFormItem:()=> <Select placeholder="请选择" style={{ width: '100%' }} 
        showSearch
        filterOption={(input, option) =>
          option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
        >
           {
                courseList&&courseList.map((item,index)=><Select.Option value={item.id} key={index}>{item.courseName}</Select.Option>)
          }
        </Select>
      },
      {
        title: '教练',
        dataIndex: 'coachName',
        render:(text,record)=><a onClick={()=>go2UserDetail(record)}>{text}</a>,
        renderFormItem:()=> <Select placeholder="请选择" style={{ width: '100%' }} 
        showSearch
        filterOption={(input, option) =>
          option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
        >
           {
                            coachList&&coachList.map((item,index)=><Select.Option value={item.userId} key={index}>{item.name}</Select.Option>)
                      }
        </Select>
      },
      // {
      //   title: '场馆',
      //   dataIndex: 'venueName',
      //   renderFormItem:()=> <Select placeholder="请选择" style={{ width: '100%' }} 
      //   filterOption={(input, option) =>
      //     option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
      //   }
      //   >
      //     {
      //       shopList&&shopList.map((item,index)=> <Select.Option value={item.id} key={index}>{item.name}</Select.Option>)
      //     }
      //   </Select>
      // },
      {
        title: '课程时间',
        dataIndex: 'timePeriod',
        hideInSearch:true,
        render:(text,record)=>{
          if(record.date){
            return record.date.concat(" ").concat(text)
          }else{
            return text
          }
        }
      },
      {
        title: '预约人数',
        dataIndex: 'bookingNum',
        hideInSearch:true
      },
      {
        title: '操作',
        dataIndex: 'option',
        valueType: 'option',
        render: (_, record) => (
          <>
            <AuthButton auth={[`lesson:schedule:detail`]} type="link"  onClick={() => go2Detail(record)}>详情</AuthButton>
            <AuthDivider auth={['lesson:schedule:detail',`lesson:group:appointment`]} type="vertical"></AuthDivider>

            <AuthButton auth={[`lesson:group:appointment`]} type="link"  onClick={() => {
              setModalVisible(true);
              setClassId(record.id)
            }}>预约</AuthButton>
            <AuthDivider auth={['lesson:group:appointment',`lesson:group:sign`]} type="vertical"></AuthDivider>

            <AuthButton auth={[`lesson:group:sign`]} type="link"  onClick={() => go2Detail(record)}>签到</AuthButton>
            <AuthDivider auth={['lesson:group:sign',`lesson:schedule:update`]} type="vertical"></AuthDivider>

            <AuthButton auth={[`lesson:schedule:update`]} type="link"  onClick={() => go2Edit(record)}>编辑</AuthButton>
            <AuthDivider auth={['lesson:schedule:update',`lesson:schedule:delete`]} type="vertical"></AuthDivider>
            <AuthButton auth={[`lesson:schedule:delete`]} type="link"  onClick={() => handleRemove(record)}>删除</AuthButton>
          </>
        ),
      },
    ];

    const go2UserDetail = (record) =>{
      history.push(`/employee/list/detail/${record.coachId}`);
    }

    const go2Detail = (record) =>{
      history.push(`/sign/reservation/detail/${record.id}`);
    }

    const go2Edit = (record) =>{
      history.push(`/lesson/schedule/edit/${record.id}`);
    }

    const loadWeekEvent = (values) =>{
      let params={
        type:'2',
        classType:'1'
      }
      if(values.courseId){
        params.courseId = values.courseId
      }
      if(values.endDate){
        params.endDate = values.endDate
      }
      console.log('loadWeekEvent>>>',values)
      if(values.startDate){
        params.startDate= moment(values.startDate).format('YYYY-MM-DD')
      }else{
        params.startDate= weekList[0]
      }
      if(values.coachId){
        params.coachId = values.coachId
      }
      if(values.venueId){
        params.venueId = values.venueId
      }
      dispatch({
        type: 'cubeSchedule/classTableInfoList',
        payload: {
          ...params
        }
      }).then((result)=>{
        let _classTableInfoMap={}
        result.map((item)=>{
          if(_classTableInfoMap[item.date]){
            _classTableInfoMap[item.date].push(item)
          }else{
            _classTableInfoMap[item.date]=[]
            _classTableInfoMap[item.date].push(item)
          }
        })
        setClassTableInfoMap(_classTableInfoMap)
      })
    }

    /**
     * 加载月课表数据
     * @param {*} values 
     */
    const loadEvent = (values) =>{
      let params={
        type:'3',
        classType:'1',
      }
      if(values.courseId){
        params.courseId = values.courseId
      }
      if(values.startDate){
        params.startDate = values.startDate
      }
      if(values.endDate){
        params.endDate = values.endDate
      }
      if(values.courseId){
        params.courseId = values.courseId
      }
      if(values.coachId){
        params.coachId = values.coachId
      }
      if(values.venueId){
        params.venueId = values.venueId
      }
      params.startDate= values.startDate||formValues.startDate||moment().format('YYYY-MM')
      dispatch({
        type: 'cubeSchedule/classTableInfoList',
        payload: {
          ...params
        }
      }).then((result)=>{
        let _calendarEvents=[]
        result.map((item)=>{
          let date = item.date.concat(' ').concat(item.openingTimeHour).concat(':').concat(item.openingTime)
          _calendarEvents.push({
            id:item.id,
            title: item.courseName, 
            start: new Date(moment(date).format('YYYY-MM-DD HH:mm:ss')),
          })
        })
        setCalendarEvents(_calendarEvents)
      })
    }

    useEffect(() => {
      if (dispatch) {
        dispatch({
          type: 'cubeSchedule/fetchCoach',
          payload: {
            empType:2,
          },
        })
        dispatch({
          type: 'cubeSchedule/selectAllCourse',
          payload: {
            classType:'1'
          },
        })
        dispatch({
          type: 'cubeSchedule/fetchShopList',
          payload:{
            userId:db.get("user").userId
          }
        })
        dispatch({
          type: 'cubeSchedule/querySiteInfoListByVenueIdNotPage',
          payload: {
            id: db.get("venue").id,
            usePurpose: 4
          }
        })
        loadWeekEvent(formValues)
       }
       if(props.location.query){
        let tabActiveKey = props.location.query.tabActiveKey;
        if(tabActiveKey){
         setTabActiveKey(tabActiveKey)
        }
       }
     }, []);

    /**
      * 切换课程还是课表
      * @param {*} tabActiveKey 
      */
    const onTabChange = tabActiveKey => {
      setTabActiveKey(tabActiveKey)
    };

    const toggleWeekends = () => {
      setCalendarEvents(!calendarWeekends)
    };
    
    const gotoPast = () => {
        let calendarApi = calendarComponentRef.current.getApi();
        calendarApi.gotoDate("2000-01-01"); // call a method on the Calendar object
      };
    
    const handleDateClick = arg => {
        setDateStr(arg.dateStr)
        setAddVisible(true)
    };

    /**
     * 生成排期
     */
    const addSchedule = () =>{
      // setVisible(true)
      history.push({
        pathname: '/lesson/schedule/addSchedule',
        query: {
          weekList,
        },
      });
    }

    const edit = record => {
      form.setFieldsValue({
        name: '',
        age: '',
        address: '',
        ...record,
      });
      setEditingKey(record.key);
    };
  
    const cancel = () => {
      setEditingKey('');
    };
  
    const save = async key => {
      try {
        const row = await form.validateFields();
        const newData = [...data];
        const index = newData.findIndex(item => key === item.key);
  
        if (index > -1) {
          const item = newData[index];
          newData.splice(index, 1, { ...item, ...row });
          setData(newData);
          setEditingKey('');
        } else {
          newData.push(row);
          setData(newData);
          setEditingKey('');
        }
      } catch (errInfo) {
        console.log('Validate Failed:', errInfo);
      }
    };

    /**
     * 日历和列表切换
     * @param {*} type 
     */
    const changeShowType = type =>{
      setShowType(type);
    }
    const action =tabActiveKey=='schedule'?(
      <RouteContext.Consumer>
        {({ }) => {
          return (
            <>
              {/* <AuthButton auth={[`lesson:group:schedule:create:schedule`]}  icon={<EditOutlined />} type="danger" onClick={()=>this.goToEdit()}>生成课表</AuthButton> */}
              <AuthButton auth={[`lesson:group:schedule:add:schedule`]}  icon={<PlusOutlined />} type="primary" onClick={addSchedule}>添加排期</AuthButton>
              <AuthButton auth={[`lesson:group:schedule:copy:schedule`]}  icon={<CopyOutlined />}  onClick={copySchedule}>复制课表</AuthButton>
              {
                showType=='C'&&<Button  icon={<CalendarOutlined />}  onClick={()=>changeShowType('L')}>日历</Button>
              }
              {
                showType=='L'&&<Button  icon={<UnorderedListOutlined />}  onClick={()=>changeShowType('C')}>列表</Button>
              }
            </>
          );
        }}
      </RouteContext.Consumer>
    ):"";

    const handleAddCancel = () =>{
      form.resetFields();
      setDateStr("")
      setAddVisible(false)
    }

    const handleAddOk = async () =>{
      const fieldsValue = await form.validateFields();
      let params={
        date:dateStr,
        venueId:fieldsValue.venueId,
        coachId:fieldsValue.coachId,
        siteId:fieldsValue.siteId,
        courseId:fieldsValue.courseId,
        openingTime:moment(fieldsValue.time).format('mm'),
        openingTimeHour:moment(fieldsValue.time).format('HH')
      }
      const hide = message.loading('正在添加');
      try {
        let result = await saveSchedule([params]);
        hide();
        if(result.code == 0){
          message.success('添加成功，即将刷新');
          handleAddCancel();
          let _date = dateStr.concat(' ').concat(params.openingTimeHour).concat(':').concat(params.openingTime);
          let _coach = courseList.filter((item)=>item.id==params.courseId);
          setCalendarEvents(calendarEvents.concat({
            title: _coach[0].courseName, 
            start: new Date(moment(_date).format('YYYY-MM-DD HH:mm:ss'))
          }))
          return true;
        }else{
          message.success('添加失败，请重试');
          return false;
        }
      } catch (error) {
        hide();
        message.error('添加失败，请重试');
        return false;
      }
    }

    /**
     * 场馆切换
     * @param {*} value 
     */
    const venueChange = (value) =>{
      dispatch({
        type: 'cubeSchedule/querySiteInfoListByVenueIdNotPage',
        payload: {
          id:value
        },
      })
    }
    /**
     * 月/周课表切换
     * @param {*} e 
     */
    const typeChange = (e) =>{
      setType(e.target.value);
      form.resetFields();
      setFormValues({})
      if('W'==e.target.value){
        loadWeekEvent({})
      }else if('M'==e.target.value){
        loadEvent({})
      }
    } 

    /**
     * 课表数据查询
     */
    const handleSearch = async() =>{
      const values = await form.validateFields();
      if(values.date){
        if(type=='M'){
          values.startDate = moment(values.date[0]).format('YYYY-MM')
          values.endDate = moment(values.date[1]).format('YYYY-MM')
        }else if(type=='W'){
          values.startDate = moment(values.date[0]).format('YYYY-MM-DD')
          values.endDate = moment(values.date[1]).format('YYYY-MM-DD')
        }
        delete values.date
      }
      setFormValues(values);
      if('M'==type){
        loadEvent(values);
      }else if('W'==type){
        loadWeekEvent(values);
      }
    }

    /**
     * 重置查询
     */
    const handleReset = () =>{
      form.resetFields();
      setFormValues({});
      if('M'==type){
        loadEvent({});
      }else if('W'==type){
        loadWeekEvent({});
      }
    
    }
    /**
     * 上一周
     * @param {*} date 
     */
    const prev = (date) =>{
      setWeekList(date)
      formValues.startDate=date[0]
      setFormValues(formValues)
      loadWeekEvent({
        startDate:date[0]
      })
    }

    /**
     * 下一周
     * @param {*} date 
     */
    const next = (date) =>{
      setWeekList(date)
      formValues.startDate=date[0]
      setFormValues(formValues)
      loadWeekEvent({
        startDate:date[0]
      })
    }

    /**
     * 跳转预约详情
     * @param {*} e 
     */
    const goDetail = (e) =>{
      let id = e.event.id;
      history.push(`/sign/reservation/detail/${id}`);
    }

    const handleCopyOk = () =>{
      if('M'==type){
        loadEvent(formValues);
      }else if('W'==type){
        loadWeekEvent(formValues);
      }
      setCopyVisible(false)
    }

    const handleCopyCancel = () =>{
      setCopyVisible(false)
    }

    const copySchedule = () =>{
      setCopyVisible(true)
    }

    /**
     * 
     * @param {*} selectedRows 
     */
    const handleBatchRemove = async selectedRows => {
      const hide = message.loading('正在删除');
      if (!selectedRows) return true;
    
      try {
        let result = await batchRemoveSchedule({
          ids: selectedRows.map(row => row.id),
        });
        hide();
        if(result.code == 0 ){
          message.success('删除成功，即将刷新');
          if(actionRef.current){
            actionRef.current.reload();
          }
          return true;
        }else{
          message.success(result.message);
          return false;
        }
      } catch (error) {
        hide();
        message.error('删除失败，请重试');
        return false;
      }
    };

    const handleRemove = async record => {
      const hide = message.loading('正在删除');    
      try {
        let result = await removeSchedule({
          id: record.id,
        });
        hide();
        if(result.code == 0 ){
          message.success('删除成功，即将刷新');
          if(actionRef.current){
            actionRef.current.reload();
          }
          return true;
        }else{
          message.success(result.message);
          return false;
        }
      } catch (error) {
        hide();
        message.error('删除失败，请重试');
        return false;
      }
    };



    return (
        <PageHeaderWrapper extra={action}
        tabActiveKey={tabActiveKey}
        onTabChange={onTabChange}
        tabList={[
          {
            key: 'schedule',
            tab: '团课排期',
          },
          {
            key: 'lesson',
            tab: '团课课程',
          }
        ]}>
          {
            (tabActiveKey=='schedule'&&showType=='L')&&
              <ProTable
                  actionRef={actionRef}
                  rowKey="id"
                  toolBarRender={(action, { selectedRows }) => [
                    <AuthButton auth={[`lesson:schedule:batch:delete`]} onClick={()=>handleBatchRemove(selectedRows)}>批量删除 <DeleteOutlined /></AuthButton>
                  ]}
                  tableAlertRender={({selectedRowKeys, selectedRows}) => (
                    <div>
                      已选择{' '}
                      <a
                        style={{
                          fontWeight: 600,
                        }}
                      >
                        {selectedRowKeys.length}
                      </a>{' '}
                      项
                    </div>
                  )}
                  request={params => {
                    let _params={
                      pageNum:params.current,
                      ...params,
                      classType: "1",
                      type: "2"
                    }
                    if(params.date){
                      _params.startDate = moment(params.date[0]).format('YYYY-MM-DD')
                      _params.endDate = moment(params.date[1]).format('YYYY-MM-DD')
                    }
                    delete _params.current
                    delete _params.date
                    return queryPrivateSchedule(_params)
                  }}
                  postData={result=>result.list}
                  columns={columns}
                  rowSelection={{}}
                />
          }
          {
            (tabActiveKey=='schedule'&&showType=='C')&&
            <>
            <Card style={{ marginBottom: 24,padding:'0 16px' }}>
            <Form  form={form} name="basic" layout="inline">
              <Row gutter={{ md: 6, lg: 24, xl: 48 }} style={{ width: '100%' }}>
                {
                  type=='M'&&<Col md={6} sm={24} style={{padding:'10px 0'}}>
                      <FormItem label="时间" name="date">
                        <RangePicker picker="month" style={{ width: '100%' }}/>
                      </FormItem>
                  </Col>
                }
                {
                  type=='W'&&<Col md={6} sm={24} style={{padding:'10px 0'}}>
                      <FormItem label="时间" name="date">
                        <RangePicker style={{ width: '100%' }} />
                      </FormItem>
                  </Col>
                }
              <Col md={6} sm={24} style={{padding:'10px 0'}}>
                  <FormItem label="课程" name="courseId">
                    <Select placeholder="请选择" style={{ width: '100%' }} 
                    showSearch
                    filterOption={(input, option) =>
                      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    >
                       {
                            courseList&&courseList.map((item,index)=><Select.Option value={item.id} key={index}>{item.courseName}</Select.Option>)
                      }
                    </Select>
                  </FormItem>
                </Col>
                {/* <Col md={8} sm={24} style={{padding:'10px 0'}}>
                  <FormItem label="场馆" name="venueId">
                    <Select placeholder="请选择" style={{ width: '100%' }} 
                    showSearch
                    filterOption={(input, option) =>
                      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    >
                      {
                          shopList&&shopList.map((item,index)=> <Select.Option value={item.id} key={index}>{item.name}</Select.Option>)
                      }
                    </Select>
                  </FormItem>
                </Col> */}
                <Col md={6} sm={24} style={{padding:'10px 0'}}>
                  <FormItem label="教练" name="coachId">
                    <Select placeholder="请选择" style={{ width: '100%' }}
                     showSearch
                     filterOption={(input, option) =>
                       option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                     }
                    >
                      {
                            coachList&&coachList.map((item,index)=><Select.Option value={item.userId} key={index}>{item.name}</Select.Option>)
                      }
                    </Select>
                  </FormItem>
                </Col>
                <Col md={6} sm={24} style={{padding:'10px 0'}}>
                  <span className={styles.submitButtons}>
                    <Button type="primary"   onClick={handleSearch}>查询</Button>
                    <Button style={{ marginLeft: 8 }} onClick={handleReset}>重置</Button>
                  </span>
                </Col>
              </Row>
            </Form>
            </Card>

            <Card bordered={false} className={styles.cardFc}>
                <Radio.Group value={type}  buttonStyle="solid" style={{float:'right'}} onChange={typeChange}>
                  <Radio.Button value="W">周</Radio.Button>
                  <Radio.Button value="M">月</Radio.Button>
                </Radio.Group>
               {
                 type=='M'&& <FullCalendar
                 defaultView="dayGridMonth"
                 header={{
                 left: "prev,next",
                 center: "title",
                 right: ""
                 }}
                 slotDuration='01:00:00'
                 slotLabelFormat={[
                   { month: 'long', year: 'numeric' }, 
                   { weekday: 'short' },
                   {
                     hour: '2-digit',
                     minute: '2-digit',
                     meridiem: false,
                     hour12: false
                   }
                 ]}
                 minTime='07:00:00'
                 maxTime='20:00:00'
                 eventLimit={3}
                 handleWindowResize={true}
                 // slotEventOverlap={false}
                 allDaySlot={true}
                 // allDayDefault={true}
                 fixedWeekCount={false}
                 showNonCurrentDates={false}
                 locale={cnLocale}
                 plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
                 ref={calendarComponentRef}
                 weekends={calendarWeekends}
                 events={calendarEvents}
                 dateClick={handleDateClick}
                 eventClick={(e)=>goDetail(e)}
                 datesRender={(view,el) => {
                  let newDate=moment(view.view.activeStart).format('YYYY-MM')
                  formValues.startDate=newDate;
                  setFormValues(formValues)
                  loadEvent({
                    ...formValues
                  })
                }}
                />
               }
               {
                 type=='W'&&<ScheduleGroup prev={prev} next={next} weekList={weekList} classTableInfoMap={classTableInfoMap}/>
               }
            </Card>
            </>
          }
          {
            tabActiveKey=='lesson'&&<LessonList courseType={1}/>
          }
          {
            addVisible&& <Modal
            title="添加排期"
            visible={addVisible}
            onOk={handleAddOk}
            onCancel={handleAddCancel}
          >
            <Form
              style={{
                marginTop: 8,
              }}
              form={form}
              name="basic"
            >
               <Form.Item
               {...formItemLayout}
                label="选择场馆"
                name="venueId"
                rules={[{ required: true, message: '请选择场馆' }]}
              >
                <Select style={{ width: '100%' }} placeholder="请选择" onChange={venueChange}>
                    {
                        shopList&&shopList.map((item,index)=> <Select.Option value={item.id} key={index}>{item.name}</Select.Option>)
                    }
                </Select>
              </Form.Item>
              <Form.Item
              {...formItemLayout}
                label="开课时间"
                name="time"
                rules={[{ required: true, message: '请选择开课时间' }]}
              >
                <TimePicker format={format} style={{width:'100%'}}/>
              </Form.Item>
              <Form.Item
              {...formItemLayout}
                label="课程"
                name="courseId"
                rules={[{ required: true, message: '请选择课程' }]}
              >
                <Select style={{ width: '100%' }} placeholder="请选择" >
                {
                      courseList&&courseList.map((item,index)=><Select.Option value={item.id} key={index}>{item.courseName}</Select.Option>)
                }
                </Select>
              </Form.Item>
              <Form.Item
              {...formItemLayout}
                label="教练"
                name="coachId"
                rules={[{ required: true, message: '请选择教练' }]}
              >
                <Select style={{ width: '100%' }} placeholder="请选择" >
                {
                        coachList&&coachList.map((item,index)=><Select.Option value={item.userId} key={index}>{item.name}</Select.Option>)
                  }
                </Select>
              </Form.Item>
              <Form.Item
              {...formItemLayout}
                label="场地"
                name="siteId"
                rules={[{ required: true, message: '请选择场地' }]}
              >
                <Select style={{ width: '100%' }} placeholder="请选择" >
                {
                      siteList&&siteList.map((item,index)=><Select.Option value={item.id} key={index}>{item.name}</Select.Option>)
                }
                </Select>
              </Form.Item>
            </Form>
          </Modal>
          }
          {
            copyVisible&&<CopySchedule copyVisible={copyVisible} handleCopyOk={handleCopyOk} handleCopyCancel={handleCopyCancel}/>
          }
          <ResevationSave ref={resevationSaveRef} visible={modalVisible} classId={classId} close={()=>{
            setModalVisible(false);
            setClassId(null);
          }} onReload={()=>actionRef?.current?.reload()}/>
        </PageHeaderWrapper>
       )
}

export default connect(({ loading,cubeSchedule }) => ({
  coachList: cubeSchedule.coachList,
  shopList: cubeSchedule.shopList,
  siteList: cubeSchedule.siteList,
  courseList: cubeSchedule.courseList,
}))(Schedule);